<template>
<!-- 轮播图 -->
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div
        class="swiper-slide"
        v-for="(item, index) in bannerList"
        :key="item"
        v-show="selectIndex == index"
      >
        <img :src="item.imageUrl" alt="" />
      </div>
    </div>
    <div class="swiper-button-next" @click="next"></div>
    <div class="swiper-button-prev" @click="prev"></div>
    <div class="swiper-pagination">
      <span
        v-for="(item, index) in bannerList"
        :key="index"
        @click="selectIndex = index"
        :class="{active: selectIndex == index }"
      >{{index+1}}</span>
    </div>
    <div class="index-download">
      <router-link to="/download" id="side-download"></router-link>
      <p>PC 安卓 iPhone WP iPad Mac 六大客户端</p>
    </div>
  </div>
  <!-- 推荐列表 -->
  <tui-list 
  :tuiList="tuiList" 
  :albumList="albumList"
  :tracksData="tracksData"></tui-list>
</template>

<script>
import { getHotT, getBanner,getAlbum,getTracks } from "@/api/singer.js";
import tuiList from "../../components/tuiList.vue";
export default {
  components: { tuiList },
  data() {
    return {
      selectIndex: 0,
      limit: 8,
      bannerList: [],
      tuiList: [],
      albumList:[],
      tracksList:[],
      tracksData:[]
    };
  },
  created() {
    this.getTuij();
    this.getbanner();
    this.getblum();
    this.gettop()
  },
  methods: {
    next() {
      this.selectIndex++;
      this.selectIndex =
        this.selectIndex > this.bannerList.length - 1 ? 0 : this.selectIndex++;
    },
    prev() {
      this.selectIndex--;
      this.selectIndex =
        this.selectIndex < 0 ? this.bannerList.length - 1 : this.selectIndex--;
    },
    // 热门推荐
    async getTuij() {
      let res = await getHotT(this.limit);
      this.tuiList = res.result;
      console.log("------", res);
    },
    // 轮播
    async getbanner() {
      let res = await getBanner();
      this.bannerList = res.banners;
    },
    // 新碟
    async getblum(){
      let res=await getAlbum();
      this.albumList=res.albums
    },
    // 榜单
    async gettop(){
      let res=await getTracks()
      this.tracksList=res.list
      console.log("榜单",this.tracksList);
      this.tracksList.forEach(ele => {
        ele.tracks.forEach(i=>{
          this.tracksData.push(i.first);
        })
      });
    }
  },
};
</script>

<style lang="less" scoped>
.swiper-container {
  position: relative;
  overflow: hidden;
  height: 285px;
}
.swiper-slide {
  width: 982px;
  margin: 0 auto;
}
.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;

  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.swiper-slide img {
  display: block;
  width: 730px;
  height: 100%;
  margin-right: 250px;
  object-fit: cover;
}
.swiper-button-next:hover,
.swiper-button-prev:hover {
  background-color: rgba(3, 3, 3, 0.3);
}
.active {
    color: red;
    width: 20px;
    height: 20px;
    display: inline-block;
    background-color: deepskyblue;
}
</style>